<template>
	<view>
		<!-- <uni-nav-bar :right-text="staffInfo.name" title="系统工作台" @clickRight="clickRight" /> -->
		<!-- 轮播图 -->
		<view  style="margin-top:60rpx;">
			<u-swiper
				:list="list2"
				keyName="image"
				showTitle
				indicator
				indicatorMode="line"
				:autoplay="false"
				circular
			></u-swiper>
		</view>
		
		<view class="u-card-wrap">
			<uni-section title="常用功能" type="line"></uni-section>
			<view style="margin-top:8px;" slot="body">
					<u-grid  :border="false">
						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}"  :index="0" 
							@click="toLesson">
							<view class="main-icon main-icon-blue">
								<u-icon  name="calendar-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">课表</view>
						</u-grid-item>
						
						<!-- <u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="1"  @click="newContract">
							<view class="main-icon main-icon-cyan">
								<u-icon name="rmb-circle-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">报名</view>
						</u-grid-item> -->
						
						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="2"
							@click="toClass" >
							<view class="main-icon main-icon-orange">
								<u-icon name="rmb-circle-fill" :size="23" color="white"
									custom-prefix="custom-icon"></u-icon>
							</view>
							<view class="grid-text">班级</view>
						</u-grid-item>
						
						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="3">
							<view class="main-icon main-icon-sky" @click="toCourse">
								<u-icon name="grid-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">课程</view>
						</u-grid-item>

						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="4" 
							@click="handleNav('/pages/student/new')">
							<view class="main-icon main-icon-yellow">
								<u-icon name="plus-people-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">添加学员</view>
						</u-grid-item>

						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="5" @click="handleNav('/pages/student/index')">
							<view class="main-icon main-icon-ocean">
								<u-icon name="account-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">我的客户</view>
						</u-grid-item>

						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="6" 
							@click="handleNav('/pages/contract/index')">
							<view class="main-icon main-icon-purple">
								<u-icon name="rmb-circle-fill" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">报名记录</view>
						</u-grid-item>

						<u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="7" @click="handleNav('/pages/center/rollcall-record')">
							<view class="main-icon main-icon-cyan">
								<u-icon name="list-dot" :size="23" color="white"></u-icon>
							</view>
							<view class="grid-text">点名记录</view>
						</u-grid-item>

						<!-- <u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="8" @click="handleNav('/pages/homework/index')">
							<view class="main-icon main-icon-cyan">
								<u-icon name="rmb-circle-fill" custom-prefix="custom-icon" :size="23" color="white">
								</u-icon>
							</view>
							<view class="grid-text">作业</view>
						</u-grid-item> -->

						<!-- <u-grid-item :customStyle="{width:180+'rpx',height:180+'rpx'}" :index="9" @click="handleNav('/pages/evaluate/index')">
							<view class="main-icon main-icon-orange">
								<u-icon name="rmb-circle-fill" custom-prefix="custom-icon" :size="23"
									color="white"></u-icon>
							</view>
							<view class="grid-text">点评记录</view>
						</u-grid-item> -->
					</u-grid>
			</view>
				
			<uni-card :cover="cover" title="今日课表"
								:extra="displayExtra()" padding="0">
				<view slot="actions"  style="font-size: 26rpx;" 
						v-for="(item,index) in lessonList" :key="index">
					<u-row>
						<u-col span="6">
							<view class="u-black u-type-primary-dark" style="line-height: 28px;height: 28px;">{{item.startTime}} ~ {{item.endTime}}</view>
							<view class="u-font-md text-black" style="line-height: 28px;height: 28px;">{{item.className}} ~ {{item.courseName}}</view>
							<view class="u-font-sm" style="line-height: 28px;height: 28px;">{{item.teacherName}} ~ {{item.roomName}}</view>
						</u-col>
						
						<u-col span="8"  offset="2">
							<u-grid>
								<u-grid-item>
									<view>
										到课&nbsp;&nbsp;{{item.studentSignNum || 0}}&nbsp;/&nbsp;{{item.studentNum || 0}}
									</view>
									<view style="margin-top: 20rpx;">
										<u-button type="primary"  size="small"
											@click="handleRollcall(item.id)" text="点  名"></u-button>
									</view>
								</u-grid-item>
							</u-grid>
						</u-col>
					</u-row>
				</view>
				<u-empty v-if="lessonList.length == 0" mode="list" text="今日无课"></u-empty>
			</uni-card>
			
			<uni-card :cover="cover" title="我的本月数据" padding="0">
				<view class="u-margin-30 bg-white boder-radius-sm">
					<view class="u-padding-left-20 u-padding-bottom-20 u-padding-right-20">
						<u-grid :col="2" @click="click" :border="true">
							<u-grid-item :index="0" @click="itemClick">
								<view style="width: 90%;">
									<view class="text-black u-type-default u-margin-bottom-10"  
										style="line-height: 28px;height: 28px;">{{counts.lesson_count}}
									</view>
									<view class="text-gray u-font-xs">本月课次数</view>
								</view>
							</u-grid-item>
							<u-grid-item :index="1">
								<view style="width: 90%;">
									<view class="text-black u-type-default u-margin-bottom-10" 
										style="line-height: 28px;height: 28px;">{{counts.rollcall_count}}
									</view>
									<view class="text-gray u-font-xs">本月点名人次</view>
								</view>
							</u-grid-item>
							<u-grid-item :index="2">
								<view style="width: 90%;">
									<view class="text-black u-type-default u-margin-bottom-10" 
										style="line-height: 28px;height: 28px;">{{counts.course_count}}
									</view>
									<view class="text-gray u-font-xs">月报单金额</view>
								</view>
							</u-grid-item>
							<u-grid-item :index="3">
								<view style="width: 90%;">
									<view class="text-black u-type-default u-margin-bottom-10" 
										style="line-height: 28px;height: 28px;">{{counts.student_count}}
									</view>
									<view class="text-gray u-font-xs">月新增学员</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				list2: [{
										image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
										title: '昨夜星辰昨夜风，画楼西畔桂堂东',
										type: 'image',
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
										title: '身无彩凤双飞翼，心有灵犀一点通'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
										title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
									}
								],
				staffInfo: {},
				lessonList: [],
				counts: {},
				current: 0,
				swiperDotIndex: 0,
				data: [{
				    image: '/static/images/banner/banner01.jpg'
				  },
				  {
				    image: '/static/images/banner/banner02.jpg'
				  },
				  {
				    image: '/static/images/banner/banner03.jpg'
				  }
				]
			}
		},
		onLoad() {
			this.getLoginStaff()
		},
		onShow() {
			this.getLessons()
			this.getCounts()
		},
		methods: {
			displayExtra() {
				return this.lessonList.length > 0 ? `今日${this.lessonList.length}节课` : '无课';
			},
			getCounts() {
				request({url: '/edu/home/getHomeCounts'}).then(res => {
					if (!this.$common.handleResponseMsg(res.data)) return;
					this.counts = res.data
				});
			},
			getLoginStaff() {
				request({url: '/edu/home/getLoginStaff',data:{
					isToday: true
				 }}).then(res => {
					if (!this.$common.handleResponseMsg(res)) return;
					this.staffInfo = res
				});
			},
			toCourse() {
				this.handleNav('/pages/course/index')
			},
			toClass() {
				uni.switchTab({
					url: '/pages/class/index'
				})
			},
			toLesson() {
				uni.switchTab({
					url: '/pages/lesson/index'
				})
			},
			newContract() {
				this.handleNav('/pages/contract/new')
			},
			getLessons() {
				request({url: '/edu/lesson/pageForTeacher',data:{
					isToday: true
				 }}).then(res => {
					if (!this.$common.handleResponseMsg(res)) {
						return;
					}
					
					this.lessonList = res.data.list;
				});
			},
			click() {

			},
			itemClick() {

			},
			handleRollcall(lessonId) {
				this.handleNav(`/pages/lesson/rollcall?lessonId=${lessonId}`)
			},
			handleNav(url) {
				uni.navigateTo({
					url
				});
			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/center/profile'
				})
			},
			clickBannerItem(item) {
			  console.info(item)
			},
			changeSwiper(e) {
			  this.current = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line-height-md {
		line-height: 150%;
	}
	.main-icon {
		padding: 8px;
		border-radius: 30rpx;
		margin-bottom: 10rpx;
		line-height: 50rpx;
	}

	.main-icon-blue {
		background-color: #0083ff;
	}

	.main-icon-cyan {
		background-color: #1dc8bf;
	}

	.main-icon-yellow {
		background-color: #facf21;
	}

	.main-icon-orange {
		background-color: #ff745b;
	}

	.main-icon-sky {
		background-color: #17bcff;
	}

	.main-icon-purple {
		background-color: #ca6ddc;
	}

	.main-icon-ocean {
		background-color: #6289ff;
	}
</style>
